<html>

<head>
    <meta charset="utf-8" />
    <title>WQX Sidebar</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/sidebar.css">
    <link rel="stylesheet" href="utils\layui\css\layui.css">
    <link rel="stylesheet" href="utils\speech-input.css">
    <script src="utils\jquery-3.5.1.min.js"></script>
    <script src="utils\axios.min.js"></script>
    <script type="module" src="js/sidebar.js"></script>
    <script src="utils\layui\layui.js"></script>
    <script src="utils\speech-input.js"></script>
</head>

<body>
    <!-- 顶部登录 -->
    <div class="top-login">
        <div class="login">
            <img src="img/side-loginhead.png" id="login-head">
        </div>
    </div>
    <!-- 三个功能模块 -->
    <div class="function">
        <div class="news">
            <img src="img/side-news1.png" class="news-pic"></img> 问答
        </div>
        <div class="recommend">
            <img src="img/side-recommend.png" class="recommend-pic"></img> 推荐
        </div>
        <div class="history">
            <img src="img/side-history.png" class="history-pic"></img> 历史记录
        </div>
    </div>
    <!-- 分隔条 -->
    <div class="seprate">
        <div class="summary">视频内容总结</div>
    </div>
    <!-- 视频总结遮罩层 -->
    <div class="su" id="su">...</div>

    <!---------------- 聊天 ---------------->
    <!-- 中间聊天框 -->
    <div class="main">
        <div class="top-chat"></div>
        <div class="history-chat">查看问答历史</div>
        <div class="nl" id="firstNew">您好，文曲星为您服务</div>
    </div>
    <!-- 底部发送消息 -->
    <div class="message">
           <!-- 选择图片 -->
        <span class="pic-btn">
            <input class="select" type="file" accept="image/*">
        </span>
        <!-- 在选择图片上面显示已选择的图片 -->
        <div class="pic-selected"><img id="se" src="img/transparent.png" ></img></div>
        <!-- 输入框 -->
        <input type="text" class="message-input speech-input" placeholder="Message" lang="zh-CN">
        <!-- 发送 -->
        <img class="mes-btn" src="img/side-btn.png"> 
    </div>

    <!---------------- 推荐 ---------------->
    <div class="main-recommend">
        <!-- <div class="knowledgePoints">知识点：谦退包容 弱德之美</div> -->
        <!-- <div class="problem">
            <div class="question">题目：</div>
            <input type="text" placeholder="请输入你的答案" class="fill layui-input">
            <div class="knowledgePoint">知识点：</div>
            <div class="answer">答案：</div>
        </div>
        <button class="submit-answer layui-btn layui-btn-primary layui-border-blue">提交答案</button> -->
    </div>

    <!---------------- 历史记录 ---------------->
    <div class="main-history">
        <!-- <div class="problem"><div class="knowledge-point">知识点：</div><div class="question">题目：</div><div class="my-answer">你的答案：</div><div class="answer">正确答案：</div></div> -->
    </div>

    <!-- 定位图片 -->
    <div class="imgs">
        <div class="side-logo1"></div>
        <div class="side-smoke"></div>
        <div class="side-lantern"></div>
        <!-- <div class="side-sun"></div> -->
        <div class="side-border"></div>
        <div class="side-circle1"></div>
        <div class="side-circle2"></div>

        <!-- 元宇宙形象 -->
        <div class="appear"></div>
        <div class="cover"><video src="img/yyz.mp4" autoplay="autoplay" muted="muted" width="104%" height="104%"></video></div>
    </div>

    

</body>

</html>